<template>
  <el-dialog :title=" '[' + formValue.productCode + '] ' + formValue.productName + ' - ' + ( showType=='product' ? '产品客户权限管理' : '客户价卡生效客户管理') + (formValue.versionName ? ' - 价卡: ' + formValue.versionName: '' ) "
             :visible.sync="dialogTableVisible"
             width="900px"
             @opened="$refs['tableAuto'].loadData()"

  >

    <el-form labelWidth="120px" label-position="top" style="padding-top: 20px;">

      <div v-if="showType=='product'" style="margin-bottom: 14px;">
        权限管理方式
        <el-radio-group v-model="customerViewType" style="margin-right: 12px; margin-left: 10px;">
          <el-radio-button label="WHITE">白名单</el-radio-button>
          <el-radio-button label="BLACK">黑名单</el-radio-button>
          <el-radio-button label="NONE">不启用权限控制</el-radio-button>
        </el-radio-group>

        <span v-if="customerViewType == 'WHITE'"><i class="el-icon-warning"></i> 只有客户列表中可以使用该产品 </span>
        <span v-if="customerViewType == 'BLACK'"><i class="el-icon-warning"></i> 客户列表中的客户将禁止使用该产品 </span>
      </div>

      <!-- display: flex; justify-content: space-between; padding-right: 20px; -->
      <div style="margin-bottom: 14px;" >

        <common_customer_choose
            :disabled="customerViewType=='NONE'"
            style="width: 300px;"
            v-model="formValue.customerId"
            @changeItem="(e)=>{ if(!e) return; formValue.customerCode = e.customerCode; formValue.customerName = e.customerName;}"
        ></common_customer_choose>
        <el-button :disabled="customerViewType=='NONE'" icon="el-icon-plus" style="margin-left: 8px; margin-right: 20px;" @click="submitForm">添加客户</el-button>



        <el-popover
            placement="bottom"
            width="400"
            trigger="click"
            v-model="showBatchInsertCustomer"
        >
          <el-input type="textarea" style="margin-bottom: 10px; " v-model="customerCodes" rows="9"
                    placeholder="请输入客户编码， 以`换行`或`逗号`分隔"
          ></el-input>
          <el-button @click="batchInsertCustomerCodes">批量添加</el-button>
          <el-button slot="reference" type="text" :disabled="customerViewType=='NONE'" icon="el-icon-plus" style=" margin-right: 20px;" >批量添加客户</el-button>
        </el-popover>


        <ex-button-delete
            :disabled="customerViewType=='NONE'"
            deleteUrl="/fms-api/product/PmsWarehouseProductPermissionRpc/removeBatch.json"
            :deleteParam="{ 'ids': selectRowIds }"
            @afterOperationDone="$refs['tableAuto'].loadData()"
            message="确认删除这些用户吗？"
            label="批量删除"
            :beforeSubmit="()=>{ if(selectRowIds == '') { $message({'type':'error', 'message': '还没有选中客户'}); return false; } return true; }"
        ></ex-button-delete>

      </div>

      <!-- v-if="customerViewType!='NONE'" -->
      <ex-table-auto

          ref="tableAuto"
          :url="queryUrl"
          style="width: 100%; margin-top: 10px; margin-bottom: 12px;"  height="400px"
          autoFill
          autoPage
          border
          :autoLoad="true"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="date" :label=" customerViewType=='BLACK' ? '已禁用客户': '已添加客户'  " min-width="150">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div style="width: 300px; ">
                [{{ scope.row.customerCode }}] {{ scope.row.customerName }}
              </div>
              <template v-if="customerViewType=='WHITE' && formValue.versionId + '' == '-1' ">

                <div>
                  <span v-if=" scope.row.versionId + '' != '-1' " style="">价卡: {{ scope.row.versionName  }}  </span>
                  <span v-else>标准价卡</span>
                </div>

              </template>
            </div>

          </template>
        </el-table-column>
        <el-table-column  min-width="50">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="keyword"
                placeholder="输入关键字过滤"
                clearable
                style="width: 160px;"
            />
          </template>
          <template slot-scope="scope">
            <ex-button-delete
                deleteUrl="/fms-api/product/PmsWarehouseProductPermissionRpc/remove.json"
                :deleteParam="{ 'id': scope.row.id }"
                @afterOperationDone="$refs['tableAuto'].loadData()"
                message="确认删除该用户吗？"
                label="删除"
            ></ex-button-delete>

          </template>
        </el-table-column>
      </ex-table-auto>

      <div style="display: flex; justify-content: space-between;">
        <div></div>
        <el-button icon="el-icon" type="primary" @click="dialogTableVisible = false"> 关闭</el-button>
      </div>

    </el-form>
  </el-dialog>

</template>


<script>
export default {
  name: "warehouse_customer_permission_dialog",
  data() {
    return {

      dialogTableVisible: false,
      hasLoad: false,

      keyword: '',

      customerViewType: '',


      formValue:{
        "productId": "",
        "versionId": "",
        "customerId": "",
        "customerCode": "",
        "customerName": ""
      },

      rightQuery: '',

      queryUrl: '',

      selectRowIds: '',

      needChange: false,

      showType: '',

      productName: '',

      customerCodes: '',

      showBatchInsertCustomer: false


    }
  },

  watch: {

    'customerViewType'(val, old){
      if (this.customerViewType === 'WHITE') {
        this.formValue.status = 'ENABLE'
      }
      else{
        this.formValue.status = ''
      }
    },

    'keyword'(val, old){
      this.queryUrl = '/fms-api/product/PmsWarehouseProductPermissionRpc/selectPage.json' + '?productId=' + this.formValue.productId+ '&versionId=' + this.formValue.versionId + '&keyword=' + this.keyword + '&status=' + this.formValue.status
    },
    value: function (val, old) {
    }

  },

  props: {
    value: null,
    'productId': {
      type: String,
      default: ''
    },
    'versionId': {
      type: String,
      default: ''
    }
  },

  created() {

    let _this = this

  },

  methods: {

    handleSelectionChange(val) {
      this.selectRowIds = val.map(e=>e.id).join(',')
    },

    batchInsertCustomerCodes(){

      let _this = this

      _this.$ajax({
        url: '/fms-api/product/PmsWarehouseProductPermissionRpc/batchSaveUpdate.json',
        data: {
          'customerCodes': _this.customerCodes,
          'json': JSON.stringify(_this.formValue)
        },
        success: function (res) {
          _this.$message({
            "type": "success",
            "message": "添加成功"
          })

          _this.customerCodes = ''
          _this.showBatchInsertCustomer = false
          _this.$refs['tableAuto'].loadData()

        }
      })

    },
    submitForm(){

      let _this = this

      if(_this.formValue.customerId == ''){
        _this.$message({
          "type": "error",
          "message": "请选择客户"
        })
        return
      }


      _this.$ajax({
        url: '/fms-api/product/PmsWarehouseProductPermissionRpc/saveUpdate.json',
        data: _this.formValue,
        success: function (res) {
          _this.$message({
            "type": "success",
            "message": "添加成功"
          })

          _this.formValue.customerId = ''
          _this.$refs['tableAuto'].loadData()

        }
      })

    },

    showDialog(cfg) {

      console.log(cfg)

      if(cfg.customerViewType == this.customerViewType){
        this.needChange = true
      }
      else{
        this.needChange = false
      }

      this.showType = cfg.showType
      this.productName = cfg.productName

      this.keyword = ''
      this.formValue.productId = cfg.productId + ''
      this.formValue.productCode = cfg.productCode
      this.formValue.productName = cfg.productName

      this.formValue.versionId = cfg.versionId + ''
      this.formValue.versionName = cfg.versionName
      if(!cfg.customerViewType){
        cfg.customerViewType = 'WHITE'
      }
      let status = ''
      if(cfg.customerViewType == 'BLACK'){
        status = 'DISABLED'
      }
      else if(cfg.customerViewType == 'WHITE'){
        status = 'ENABLE'
      }
      this.customerViewType = cfg.customerViewType

      this.queryUrl = '/fms-api/product/PmsWarehouseProductPermissionRpc/selectPage.json' + '?productId=' + cfg.productId+ '&versionId=' + cfg.versionId + '&status=' + status
      this.dialogTableVisible = true



    },


    afterChange(val) {

    }

  }
}
</script>


<style scoped>

</style>
